<template>
  <div class="live-header">
    <!-- <div class="title">{{ title }}</div> -->
    <!-- <img
      class="header-img"
      src="	https://www.chinaport.gov.cn/src/img/logo01.png"
      alt="logo"
    /> -->
    <MainSearch
      v-if="showSearch"
      :placeholder="placeholder"
      @inputChange="inputChange"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import MainSearch from './main-search.vue'

export default defineComponent({
  components: { MainSearch },
  props: {
    title: String,
    placeholder: String,
    showSearch: {
      type: Boolean,
      default: true,
    },
  },
  setup(props, { emit }) {
    const inputChange = (item: any) => {
      // console.log(item)

      emit('inputChange', item)
    }
    return { inputChange }
  },
})
</script>

<style lang="less" scoped>
.live-header {
  display: flex;
  justify-content: end;
  // align-items: center;
  // margin-bottom: 16px;
  // margin: 0 250px;
  .title {
    font-size: 19px;
  }
  .header-img {
    height: 60px;
  }
}
</style>
